<script setup lang="ts">
import {computed, ref} from "vue";
import {Menu, Setting, SwitchButton} from "@element-plus/icons-vue";
import {useUserStore} from "../stores/userStore.ts";
import {useRoute, useRouter} from "vue-router";

const username = computed(() => {
  return userStore.loginUser?.username || '未登录'
})

const avatar = computed(() => {
  return userStore.loginUser?.avatar || ''
})

let router = useRouter();
const userStore = useUserStore();
const route = useRoute();

const logoSrc = computed(() => {
  return '../../public/ai-logo.png'
})

const showLogo = computed(() => {
  return window.innerWidth > 768;
});

const showRight = computed(() => {
  return !route.path.startsWith("/user")
})

const logout = () => {
  userStore.logout()
}

const toHome = () => {
  router.push("/problem")
}

const toLogin = () => {
  router.push("/user/login")
}

const toProfile = () => {
  router.push("/profile/" + userStore.loginUser.account)
}

const drawerVisible = ref(false)

const toggleSidebar = () => {
  drawerVisible.value = !drawerVisible.value
}

const showUsername = computed(() => {
  return window.innerWidth > 768;
});

const isActive = (path: string) => {
  if (path === '/') {
    return route.path === '/';
  }
  return route.path.startsWith(path);
}
</script>

<template>
  <nav class="header">
    <div class="left-section">
      <button class="menu-trigger" @click="toggleSidebar">
        <el-icon>
          <Menu/>
        </el-icon>
      </button>
      <div @click="toHome" class="logo-container" v-if="showLogo">
        <img :src="logoSrc" alt="Logo" class="logo-image"/>
      </div>
      <div class="nav-links">
        <router-link to="/" class="nav-link" :class="{ active: isActive('/') }">主页</router-link>
        <router-link to="/problem" class="nav-link" :class="{ active: isActive('/problem') }">题库</router-link>
        <el-dropdown trigger="hover" class="nav-dropdown">
          <span class="nav-link" :class="{ active: isActive('/add') }">管理</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/add/question" class="dropdown-link">添加题目</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/add/set" class="dropdown-link">新增题集</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/manage/home" class="dropdown-link">管理主页</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="right-section" v-if="showRight">
      <template v-if="userStore.isLogin">
        <el-dropdown trigger="click" class="user-dropdown">
          <div class="user-info">
            <el-avatar class="user-avatar" :src="avatar"/>
            <span v-if="showUsername" class="username">{{ username }}</span>
          </div>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toProfile">
                <el-icon>
                  <Setting/>
                </el-icon>
                <span>个人中心</span>
              </el-dropdown-item>
              <el-dropdown-item @click="logout" class="logout-item">
                <el-icon>
                  <SwitchButton/>
                </el-icon>
                <span>登出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <el-button v-else type="primary" class="login-button" plain @click="toLogin">登录</el-button>
    </div>
  </nav>

  <el-drawer
      v-model="drawerVisible"
      direction="ltr"
      size="240px"
      :with-header="false"
  >
    <div class="drawer-content">
      <router-link to="/" class="drawer-item" :class="{ active: isActive('/') }">
        主页
      </router-link>
      <router-link to="/problem" class="drawer-item" :class="{ active: isActive('/problem') }">
        题库
      </router-link>
      <el-collapse>
        <el-collapse-item title="管理" name="1">
          <router-link to="/add/question" class="drawer-sub-item">
            添加题目
          </router-link>
          <router-link to="/add/set" class="drawer-sub-item">
            新增题集
          </router-link>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-drawer>
</template>

<style scoped>
.header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: white;
  border-bottom: solid 1px var(--el-menu-border-color);
}

.left-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.right-section {
  display: flex;
  align-items: center;
}

.logo-container {
  cursor: pointer;
}

.logo-image {
  height: 40px;
  width: 300px;
  object-fit: contain;
}

.nav-link {
  color: #737373;
  text-decoration: none;
  font-size: 14px;
  padding: 0 20px;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-link:hover {
  color: var(--el-text-color-primary);
  background-color: var(--el-fill-color-light);
}

.nav-link.active {
  font-weight: bold;
  color: #0A4991;
  background-color: var(--el-fill-color-light);
}

.user-dropdown {
  padding: 0 20px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  margin-right: 10px;
}

.username {
  color: var(--el-text-color-primary);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 5px;
}

:deep(.logout-item) {
  color: var(--el-color-danger);
}

.menu-trigger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--el-text-color-primary);
  border-radius: 4px;
  transition: all 0.3s;
}

.menu-trigger:hover {
  background-color: var(--el-fill-color-light);
}

.login-button {
  margin: auto 20px;
  height: 36px;
}

@media screen and (max-width: 768px) {
  .menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-container {
    display: none;
  }

  .user-avatar {
    margin-right: 0;
  }

  .nav-links {
    display: none !important;
  }
}

.nav-dropdown {
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}

.nav-dropdown :deep(.el-dropdown) {
  outline: none !important;
  border: none !important;
}

.nav-dropdown :deep(.el-popper) {
  border: none !important;
}

.nav-link {
  outline: none !important;
  border: none !important;
}

.nav-dropdown span.nav-link {
  outline: none !important;
  border: none !important;
}

.nav-dropdown *:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.nav-dropdown :deep(.el-dropdown-menu) {
  padding: 5px 0;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-dropdown :deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.dropdown-link {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.nav-dropdown :deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: var(--el-fill-color-light);
  color: var(--el-color-primary);
}

.drawer-content {
  padding: 20px 0;
}

.drawer-item {
  display: block;
  padding: 12px 20px;
  color: var(--el-text-color-primary);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.drawer-item:hover {
  background-color: var(--el-fill-color-light);
}

.drawer-item.active {
  color: var(--el-color-primary);
  background-color: var(--el-fill-color-light);
}

.drawer-sub-item {
  display: block;
  padding: 10px 20px 10px 40px;
  color: var(--el-text-color-regular);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s;
}

.drawer-sub-item:hover {
  color: var(--el-color-primary);
  background-color: var(--el-fill-color-light);
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item__header) {
  padding: 12px 20px;
  font-size: 14px;
  color: var(--el-text-color-primary);
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}

:deep(.el-collapse-item__wrap) {
  border: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
